<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index-Index</title>
    <script src="script/overread.js"></script>
    <script src="script/jquery-3.4.1.min.js"></script>
    <script src="script/lunar.js"></script>
    <link rel="stylesheet" href="css/mian.css">

</head>

<body>
    <div class="container">
        <div class="canecler_body">
            <div class="OperationBar">
                <span class="year_value">2022</span>
                <button class="btnStyle subBtn">&lt;&lt;</button>
                <span class="month_value">12</span>
                <button class="btnStyle addBtn">&gt;&gt;</button>
                <button class=" toDayBtn">今</button>
            </div>
            <div class="canecle_head">
                <ul>
                    <li><span>周日</span></li>
                    <li>周一</li>
                    <li>周二</li>
                    <li>周三</li>
                    <li>周四</li>
                    <li>周五</li>
                    <li>周六</li>
                </ul>
            </div>
            <div class="canelce_content">
                <ul class="calendar">
                </ul>
            </div>
        </div>
        <div class="canecle_desc">
            <div class="desc_chunk_top">
                <div class="cell_2 chunk_top_left">
                    <span class="spanblock" id="date"></span>
                    <span class="spanblock" id="date_cn"></span>
                    <span class="spanblock" id="date_cn_desc"></span>
                </div>
                <div class="cell_1 chunk_top_right">
                    <span class="spanblock" id="week">星 期</span>
                    <span class="spanblock" id="week_day"></span>
                </div>
            </div>
            <div class="desc_chunk_under">
                <div class="cell_1 chunk_under_left">
                    <span class="spanblock" id="jieri">节 日</span>
                    <ul id="jieri_desc">
                    </ul>
                </div>
                <div class="cell_2 chunk_under_right">
                    <div class="under_right_top">
                        <div class="cell_1 right_top_yi">
                            <span class="spanblock yiji" id="yi">宜</span>
                            <ul class="yiji_list" id="yi_list">
                            </ul>
                        </div>
                        <div class="cell_1 right_top_ji">
                            <span class="spanblock yiji" id="ji">忌</span>
                            <ul class="yiji_list" id="ji_list">
                            </ul>
                        </div>
                    </div>
                    <div class="under_right_under">
                        <table class="jieri_countdown">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        //画日历
    </script>

    <script>
        window.load = loadInit()

        function loadInit() {
            let date = new Date()
            $(".year_value").html(date.getFullYear())
            $(".month_value").html(date.getMonth() + 1)
            Draw(date.getFullYear(), date.getMonth() + 1)
            DrawView(date.getFullYear(), date.getMonth() + 1, date.getDate())
        }

        $(".subBtn").click(function () {
            let y = $(".year_value").html()
            let m = $(".month_value").html()
            if (m >= 1 && m <= 12) {
                if (m == 1) {
                    m = 12;
                    y--;
                } else {
                    m--;
                }
                $(".year_value").html(y)
                $(".month_value").html(m)
            }
            Draw(y, m)
        })
        $(".addBtn").click(function () {
            let y = $(".year_value").html()
            let m = $(".month_value").html()
            if (m >= 1 && m <= 12) {
                if (m == 12) {
                    m = 1;
                    y++;
                } else {
                    m++;
                }
                $(".year_value").html(y)
                $(".month_value").html(m)
            }
            Draw(y, m)
        })
        $(".toDayBtn").click(function () {
            loadInit()
        })


        //绘画日历
        function Draw(y, m) {
            let el = $(".calendar")
            el.find("li").remove()
            el.append(GetElementStr(y, m))
            el.children("li").click(function () {
                el.children("li").removeClass("checkedStyle")
                $(this).addClass("checkedStyle")
                let yy = $(".year_value").html()
                let mm = $(".month_value").html()
                let dd = $(this).children(".cel_world_date").html()
                console.log(dd)
                if (dd != " ")
                    DrawView(yy, mm, dd)
            })
            let date = new Date()
            let idid = "id_" + date.getFullYear() + (date.getMonth() + 1).toString() + (parseInt(date.getDate()))
                .toString()
            $("#" + idid).css({
                "color": "#fb720d",
                "background-color": "#b0e5ff"
            })
        }

        //获取日历的html文档
        function GetElementStr(y, m) {
            let date_template =
                "<li class='ordinary_item' id='{0}' title='{3}'><span class='cel_world_date'>{1}</span><span class='cel_cn_date'>{2}</span></li>"
            let date_content = ''
            let monthArray = GetMonthArray(y, m)
            for (let i = 0; i < monthArray.length; i++) {
                if (monthArray[i] != ' ') {
                    let lunar = GetLunar(y, m, monthArray[i])
                    let cn_date = ''
                    if (lunar.Lunar != '') {
                        cn_date = lunar.Lunar
                    }
                    if (lunar.JieQi != '') {
                        cn_date = lunar.JieQi
                    }
                    if (lunar.JieRi.length != 0) {
                        cn_date = lunar.JieRi[0]
                    }
                    date_content += date_template.format("id_{0}{1}{2}".format(y, m, lunar.Solar), lunar.Solar, cn_date,
                        "{0}年{1}月{2}日".format(y, m, lunar.Solar))
                } else {
                    date_content += date_template.format("id_{0}".format(i), ' ', ' ', '')
                }
            }
            return date_content
        }

        //获取月天数数组
        function GetMonthArray(y, m) {
            let dayNum = GetMonthDayNum(y, m)
            let date = new Date("{0}-{1}-01".format(y, m))
            let week = date.getDay()
            let monthArray = []
            for (let i = 0; i < week; i++) {
                monthArray.push(' ')
            }
            for (let i = 0; i < 35 - week; i++) {
                if (i < dayNum)
                    monthArray.push((i + 1).toString())
                else
                    monthArray.push(' ')
            }
            return monthArray
        }

        //根据年月获取当月的天数
        function GetMonthDayNum(y, m) {
            let NumOfDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
            if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {
                if (m == 2)
                    return NumOfDay[m - 1] + 1
                else
                    return NumOfDay[m - 1]
            } else {
                return NumOfDay[m - 1]
            }
        }

        // 获取阴历
        function GetLunar(y, m, d) {
            let lunar = {
                Solar: '',
                Lunar: '',
                JieQi: '',
                JieRi: '',
            }
            let lun = Lunar.fromDate(new Date('{0}-{1}-{2}'.format(y, m, d)))
            lunar.Solar = d
            lunar.Lunar = lun.getDayInChinese()
            lunar.JieQi = lun.getJieQi()
            lunar.JieRi = lun.getFestivals()
            return lunar
        }

        //获取日历详情
        function GetCalendar(y, m, d) {
            let sol = Solar.fromDate(new Date('{0}-{1}-{2}'.format(y, m, d)))
            let lun = Lunar.fromDate(new Date('{0}-{1}-{2}'.format(y, m, d)))
            let res = {
                date: "",
                cn_date: "",
                cn_year: "",
                cn_month: "",
                cn_day: "",
                weekday: "",
                jieri: [],
                yi: [],
                ji: []
            }
            res.date = "{0}年{1}月{2}日".format(sol.getYear(), sol.getMonth(), sol.getDay())
            res.cn_date = "农历{0}月{1}".format(lun.getMonthInChinese(), lun.getDayInChinese())
            if (lun.getJieQi() != '') {
                res.cn_date += "({0})".format(lun.getJieQi())
            }
            res.cn_year = "{0}{1}年".format(lun.getYearInGanZhi(), lun.getYearShengXiao())
            res.cn_month = "{0}月".format(lun.getMonthInGanZhi())
            res.cn_day = "{0}日".format(lun.getDayInGanZhi())
            res.weekday = lun.getWeekInChinese()
            res.jieri = sol.getFestivals().concat(sol.getOtherFestivals()).concat(lun.getFestivals())
            res.yi = lun.getDayYi()
            res.ji = lun.getDayJi()
            return res
        }

        //把日历详情放入页面
        function DrawView(y, m, d) {
            let lun_desc = GetCalendar(y, m, d)
            let date = $("#date")
            let date_cn = $("#date_cn")
            let date_cn_desc = $("#date_cn_desc")
            let week_day = $("#week_day")
            let jieri_desc = $("#jieri_desc")
            let yi_list = $("#yi_list")
            let ji_list = $("#ji_list")
            let jieri_countdown = $(".jieri_countdown")
            date.html(lun_desc.date)
            date_cn.html(lun_desc.cn_date)
            date_cn_desc.html("{0}•{1}•{2}".format(lun_desc.cn_year, lun_desc.cn_month, lun_desc.cn_day))
            week_day.html(lun_desc.weekday)

            let jieri_template =
                "<li title='{0}'><marquee behavior='scroll' scrollamount='2'>{0}</marquee></li>"
            let jieri_template1 = "<li title='{0}'>{0}</li>"
            let jieri_str = ""
            if (lun_desc.jieri.length > 0) {
                lun_desc.jieri.forEach(e => {
                    if (e.length > 5) {
                        jieri_str += jieri_template.format(e)
                    } else {
                        jieri_str += jieri_template1.format(e)
                    }

                });
            } else {
                jieri_str = jieri_template.format("今天没有节日!")
            }
            jieri_desc.find("li").remove()
            jieri_desc.append(jieri_str)

            let yiji_template = "<li title='{0}'>{0}</li>"
            let yi_str = ""
            if (lun_desc.yi.length > 0) {
                lun_desc.yi.forEach(e => {
                    yi_str += yiji_template.format(e)
                });
            }
            yi_list.find("li").remove()
            yi_list.append(yi_str)

            let ji_str = ""
            if (lun_desc.ji.length > 0) {
                lun_desc.ji.forEach(e => {
                    ji_str += yiji_template.format(e)
                });
            }
            ji_list.find("li").remove()
            ji_list.append(ji_str)


            //获取有假日的节日并放入界面
            let daojishi = holiday()
            let djs_template = "<tr><td>距离</td><td>{0}</td><td>还剩</td><td>{1}</td><td>天</td></tr>"
            let djs_str = ""
            daojishi.forEach(e => {
                djs_str += djs_template.format(e.name, e.diffDay)
            });
            jieri_countdown.find('tr').remove()
            jieri_countdown.append(djs_str)
        }

        //主要假期节日
        function holiday() {
            let date = new Date()
            let d = Lunar.fromYmd(date.getFullYear(), 1, 1)
            let hol = [{
                    'name': '元旦',
                    'time_year': date.getFullYear().toString(),
                    'time_month': '01',
                    'time_day': '01'
                },
                {
                    'name': '春节',
                    'time_year': date.getFullYear().toString(),
                    'time_month': Lunar.fromYmd(date.getFullYear(), 1, 1).getSolar().getMonth().toString(),
                    'time_day': Lunar.fromYmd(date.getFullYear(), 1, 1).getSolar().getDay().toString()
                }, {
                    'name': '清明节',
                    'time_year': d.getJieQiTable()['清明'].toYmd().toString().split('-')[0],
                    'time_month': d.getJieQiTable()['清明'].toYmd().toString().split('-')[1],
                    'time_day': d.getJieQiTable()['清明'].toYmd().toString().split('-')[2]
                }, {
                    'name': '劳动节',
                    'time_year': date.getFullYear().toString(),
                    'time_month': '05',
                    'time_day': '01'
                }, {
                    'name': '端午节',
                    'time_year': date.getFullYear().toString(),
                    'time_month': Lunar.fromYmd(date.getFullYear(), 5, 5).getSolar().getMonth().toString(),
                    'time_day': Lunar.fromYmd(date.getFullYear(), 5, 5).getSolar().getDay().toString()
                }, {
                    'name': '中秋节',
                    'time_year': date.getFullYear().toString(),
                    'time_month': Lunar.fromYmd(date.getFullYear(), 8, 15).getSolar().getMonth().toString(),
                    'time_day': Lunar.fromYmd(date.getFullYear(), 8, 15).getSolar().getDay().toString()
                }, {
                    'name': '国庆节',
                    'time_year': date.getFullYear().toString(),
                    'time_month': '10',
                    'time_day': '01'
                }
            ]

            let time = []
            hol.forEach(e => {
                let dates = "{0}-{1}-{2}".format(e.time_year, e.time_month, e.time_day)
                let datess = new Date(dates)
                let i = 0
                if (datess > date) {
                    if (i < 3) {
                        let diffDay = parseInt((datess - date) / (1000 * 60 * 60 * 24))
                        let obj = {
                            'name': e.name,
                            'diffDay': diffDay + 1
                        }
                        time.push(obj)
                    }
                    i++
                }
            });

            if (time.length < 3) {
                hol.forEach(e => {
                    let dates = "{0}-{1}-{2}".format(parseInt(e.time_year) + 1, e.time_month, e.time_day)
                    let datess = new Date(dates)
                    i = 3 - time.length
                    if (i > 0) {
                        let diffDay = parseInt((datess - date) / (1000 * 60 * 60 * 24))
                        let obj = {
                            'name': e.name,
                            'diffDay': diffDay
                        }
                        time.push(obj)
                    }
                    i--
                });
            }
            return time
        }

        //还距离选中的日期剩几天
        function remainDay(y, m, d) {
            let date = new Date()
            let date_str = "{0}-{1}-{2}".format(y, m, d)
            let date_2 = new Date(date_str)
            let diffDay = parseInt((date_2 - date) / (1000 * 60 * 60 * 24))

            if (diffDay > 0) {
                console.log((diffDay + 1).toString() + "天后")
            } else if (diffDay < 0) {
                console.log((Math.abs(diffDay)).toString() + "天前")
            } else {
                console.log()
            }


        }
    </script>
</body>

</html>